<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>    
    <script src="./node_modules/vue/dist/vue.js"></script>

</head>
<body>
    <style>
        .selected{
            color :red;

        }
    </style>
    <div id="app">
        <ul>
            <!-- key值 -->
            <!-- 操作数组
                直接用index操作数组是不能改变dom的
                也可以直接将data指向另一个数组,但是不能操作index
                push pop shift unshift reverse splice slice
                
                数组的set方法:
                Vue.set(vm.userInfo,第几位,改成啥)
                vm.$set(vm.userInfo,第几位,改成啥)
            
            
            -->
            <!-- template占位符,可以包裹一些要循环的元素,但是不会再网页中显示出来 -->
            <li v-for="(item, index) in list" :key="index"
                :class='{selected:index==clickWho}'
                @click='niubi(index)'
            >{{item}}</li>
        </ul>
        <!-- 对象的循环 -->
        <div v-for="(item, key ,index) in userInfo" >
            {{item}}----{{key}}-----{{index}}
        </div>
        <!-- 直接添加键值对是不行的
            vm.userInfo={
                一个全新的对象是可以改变的
            }
            还有一个set方法可以向对象注入数据
            Vue.set(vm.userInfo,'adress','beijing')
            就会增加键值对
            或者vm.$set(vm.userInfo,'adress','beijing')
        -->


    </div>
    
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            list:[
                'ni',
                'shi',
                'yi',
                'ge',
                'da',
                'da',
                'sha',
                'bi'
            ],
            clickWho:0,
            userInfo:{
                name:'Dell',
                age:28,
                gender:'male',
                salary:'secret'
            }
        },
        methods:{
            niubi(i){
                this.clickWho=i
            }
        }
    })
</script>

</body>
</html>